<template>
	<view class="search-page">
		<view class="header">
			<view class="search-box">
				<text class="iconfont icon-sousuo6"></text>
				<input class="set" v-model="searchVal" type="text" placeholder="输入关键词搜索" />
				<view class="search-btn" @click="toSearch">搜索</view>
			</view>
		</view>
		
		<view class='top-nav'>
			<view class="set-all">综合</view>
			<view class='item' @click='set_where(2)'>
				价格
				<image v-if="price==1" src='../../../static/images/up.png'></image>
				<image v-else-if="price==2" src='../../../static/images/down.png'></image>
				<image v-else src='../../../static/images/horn.png'></image>
			</view>
			<view class='item' @click='set_where(3)'>
				销量
				<image v-if="stock==1" src='../../../static/images/up.png'></image>
				<image v-else-if="stock==2" src='../../../static/images/down.png'></image>
				<image v-else src='../../../static/images/horn.png'></image>
			</view>
			<view class="screen-box">
				<image src="../../../static/images/icon/screen.png"></image>
				<text>筛选</text>
				<image src="../../../static/images/icon/display.png"></image>
			</view>
		</view>
		
		<helang-waterfall-list
			:status="waterfall.status"
			:list="waterfall.list"
			:reset="waterfall.reset"
			@click="onClick"
			@done="onDone"
		>
			<template>
				<view v-if="waterfall.status == 'await'">
					<view class="load-txt">上拉加载更多</view>
				</view>
				<view v-else-if="waterfall.status == 'loading'">
					<view class="load-txt">加载中</view>
				</view>
				<view v-else-if="waterfall.status == 'success'">
					<view class="load-txt">加载中</view>
				</view>
				<view v-else-if="waterfall.status == 'finish'">
					<view class="load-txt">没有更多了</view>
				</view>
				<view v-else-if="waterfall.status == 'fail'">
					<view class="load-txt">出错了，请刷新重试</view>
				</view>
				<view v-else-if="waterfall.status == 'empty'">
					<view class="load-txt">暂无数据</view>
				</view>
				<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
			</template>
		</helang-waterfall-list>
	</view>
</template>

<script>
	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
	import item from "@/pages/lease/components/item"
	
	export default {
		components: {
			"helang-waterfall-list": helangWaterfallList,
			item
		},
		data() {
			return {
				searchVal: '',
				price: 0,
				stock: 0,
				ajax: {
					load: true,
					rows:10,
					page:1,
					dataList:[]
				},
				waterfall:{
					status:"",
					reset:false,
					list:[]
				}
			}
		},
		onReady() {
			this.getList();
		},
		// 触底触发
		onReachBottom() {
			this.getList();
		},
		onLoad(options) {
			this.searchVal = options.title
		},
		methods: {
			onDone(){
				// 设置组件为 非重置，这行代码保留不删即可
				this.waterfall.reset = false;
				
				// 恢复 getList 方法的调用
				this.ajax.load = true;
				this.ajax.page++;
				
				// 设置组件状态为 等待加载
				this.waterfall.status = 'await';
			
			},
			// 获取数据
			getList() {
				this.waterfall.list = [
					{
						"id": 1,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "桃花仙人种桃树，又摘桃花卖酒钱。",
						"money": 7460,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 2,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "别人笑我太疯癫，我笑他人看不穿；不见五陵豪杰墓，无花无酒锄作田。",
						"money": 8979,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 3,
					   "url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
					   "title": "桃花仙人种桃树，又摘桃花卖酒钱。",
						"money": 8402,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 4,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "一在平地一在天；若将贫贱比车马，他得驱驰我得闲。",
						"money": 1335,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 5,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "但愿老死花酒间，不愿鞠躬车马前；",
						"money": 8753,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 6,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "桃花仙人种桃树，又摘桃花卖酒钱。",
						"money": 4110,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 7,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "但愿老死花酒间，不愿鞠躬车马前；",
						"money": 9153,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					},
					{
						"id": 8,
						"url": "https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800",
						"title": "一在平地一在天；若将贫贱比车马，他得驱驰我得闲。",
						"money": 5286,
						"label": "官方自营",
						"shop": "唐诗三百首旗舰店"
					}
				]
				this.waterfall.status = 'success';
			},
		},
	}
</script>

<style lang="scss">
	page { background-color: #fff; }
	.search-page {
		.header {
			padding: 24rpx;
			box-shadow: inset 0rpx -2rpx 0rpx 0rpx #FAFAFA;
			
			.search-box {
				padding: 0 8rpx 0 24rpx;
				display: flex;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 1rpx solid #39CCC2;
				align-items: center;
				
				.iconfont {
					margin-right: 12rpx;
					color: #979797;
				}
				
				.set {
					flex: 1;
					font-size: 28rpx;
				}
				
				.search-btn {
					margin-left: 24rpx;
					width: 120rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #39CCC2;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
				}
			}
			
		}
	
		.top-nav {
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			height: 92rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #1F1F1F;
			border-bottom: 2rpx solid #FAFAFA;

			.set-all {
				flex: 1;
			}
			
			.item {
				margin-right: 80rpx;
				
				image {
					width: 15rpx;
					height: 19rpx;
					margin-left: 10rpx;
				}
			}
			
			.screen-box {
				display: flex;
				align-items: center;
				
				image {
					width: 28rpx;
					height: 28rpx;
				}
				
				text {
					margin: 0 16rpx 0 4rpx;
					padding-right: 16rpx;
					border-right: 2rpx solid #EBEBEB;
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}
			}
		}
	}
</style>